<template>
  <el-dialog
    :title="$t('page-form.form.add')"
    :visible.sync="visible"
    width="500px"
    :close-on-click-modal="false"
    append-to-body
    @closed="$emit('dialog-close')"
  >
    <el-form ref="main-form" :model="form" :rules="rules" size="mini">
      <el-form-item :label="$t('page-form.form.url')" prop="url">
        <el-input
          placeholder=""
          v-model="form.url"
          @keyup.enter.native="submit"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('page.form.websiteRecordNumber')" prop="beianNo">
        <el-input
          placeholder=""
          v-model="form.beianNo"
          @keyup.enter.native="submit"
          clearable
        ></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false" size="mini">{{
        $t("page-trade-refund.dialog-add.cancel")
      }}</el-button>
      <el-button
        type="primary"
        @click="submit"
        size="mini"
        :loading="loading"
        >{{ $t("page-trade-refund.dialog-add.submit") }}</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { mapState, mapActions } from "vuex";
import ApiMain from "@/api/trade.website";

export default {
  mixins: [],
  props: [],
  data() {
    return {
      visible: false,
      popDeleteVisible: false,
      loading: false,

      formRaw: null,
      form: {
        // terId: "",
        url: "",
        beianNo:"",
      },

      rules: {
        url: [{ required: true, message: "这是必填选项", trigger: "blur" }],
         recordNumber: [{ required: true, message: "请输入网站备案号", trigger: "blur" }],
      },

      data: null,
    };
  },
  computed: {
    ...mapState("d2admin/user", {
      user: "info",
    }),
  },
  mounted() {
    this.formRaw = Object.copy(this.form);
  },

  methods: {
    show(data = null) {
      this.reset();

      this.data = data;

      if (!!data) {
        for (var k in this.form) {
          if (this.data[k]) {
            this.form[k] = this.data[k];
          }
        }
      }

      this.visible = true;
    },

    reset() {
      this.form = Object.copy(this.formRaw);
    },

    verifyForm() {
      var bool = true;
      this.$refs["main-form"].validate((valid) => (bool = valid));
      return bool;
    },

    async submit() {
      if (!this.verifyForm()) return false;

      this.loading = true;

      try {
        if (!!this.data) {
          await this.submitSet();
        } else {
          await this.submitAdd();
        }
      } finally {
        this.loading = false;
      }
    },

    async submitSet() {
      var req = Object.copy(this.form);
      req.id = this.data.id;

      await ApiMain.set(req);

      this.$message({ message: "修改成功", type: "success" });
      this.visible = false;
    },

    async submitAdd() {
      var req = Object.copy(this.form);

      await ApiMain.add(req);
      this.$message({ message: "添加成功", type: "success" });
      this.visible = false;
    },
  },
};
</script>

<style>
</style>
